<template>
      <div class="test-area">
        <div class="overview">
          <div class="title" style="text-align: left;">数据详情</div>
          <div class="YOY">
            <div>上海 5G出账客户数</div>
            <div class="rate1"> 1272万户</div>
          </div>
  
          <div class="MOM">
            <div>江苏 5G出账客户数</div>
            <div class="rate2">891万户</div>
          </div>
  
          <div class="timeframe">
            <button class="time-button">同比</button>
            <button class="time-button">环比</button>
            <button class="time-button active">指标值</button>
          </div>
        </div>
        <e-charts-component class='echart-component' :options="chartOptions" :style="styleObject">
   
        </e-charts-component>
  
        <div class="bottom-chooice">
          
        </div>
  
      </div>
  </template>
  
  <script>
  import EChartsComponent from '../EChartsComponent.vue';

  export default {
    name: 'HomePage',
    computed: {
      styleObject() {
        return {
          width: this.width,
          height: `calc(${this.width} / 2.5)`
        };
      }
    },
    components: {
      EChartsComponent
    },
    data() {
      return {
        width: '100%',
        chartOptions: {
          color: ['#485A80'],
          textStyle: {
            color: 'rgba(255, 255, 255, 0.8)'  // 设置全局字体颜色为白色
          },
  
          grid: {
            left: '8%',
            right: '8%',
            bottom: '15%', // 调整底部留白
            top: '10%' // 调整顶部留白
          },
  
          tooltip: {
            textStyle: {
              color: 'rgba(0, 0, 0, 0.8)'  // 设置提示框字体颜色为白色
            }
          },
  
          xAxis: {
            type: 'category',
            data: ["广东", "江苏", "上海", "湖北"],
            axisLabel: {
              textStyle: {
                color: '#F9F9FA'  // 设置x轴标签字体颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.8)'  // 设置x轴线颜色为白色
              }
            }
          },
  
          yAxis: {
            axisLabel: {
              textStyle: {
                color: '#F9F9FA'  // 设置y轴标签字体颜色为白色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#F9F9FA'  // 设置y轴线颜色为白色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'  // 设置y轴网格线的颜色和透明度
              }
            }
          },
          series: [{
            name: '用户数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              borderRadius: [20, 20, 0, 0]  // 设置柱子的圆角
            }
          }]
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .area {
    background-color: #fff;
    padding: 20px;
    padding-top: 40px;
    height: 89vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .test-area {
    background: linear-gradient(135deg, #1F1E21 0%, #1D283F 100%);
    border-radius: 23px;
    height: 460px;
    width: 375px;
    border-style: solid; /* 边框样式为实线 */
    border-width: 1px; /* 边框宽度为 1 像素 */
    border-color: rgba(88, 88, 88, 0.247); /* 边框颜色为 saddlebrown */
    overflow: hidden; /* 确保内容不会溢出 */
    position: relative;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .overview {
    color: #ffffff;
    margin-bottom: 20px;
  }
  
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .YOY {
    color: #ffffffd0;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 2px;
  }
  
  .MOM {
    color: #ffffffd0;
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    margin-bottom: 20px;
  }
  
  .rate1 {
    color: #1BB934;
    text-align: left;
  }
  
  .rate2 {
    color: #1BB934;
    text-align: left;
  }
  
  .timeframe {
    display: flex;
    justify-content: space-around;
    border-style: solid; /* 边框样式为实线 */
    border-width: 1px; /* 边框宽度为 1 像素 */
    border-color: rgba(255, 255, 255, 0.4); 
    border-radius: 20px;
  }
  
  .time-button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 6px;
    padding-top: 6px;
    cursor: pointer;
    border-radius: 20px;
  }
  
  .time-button.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
  
  }
  
  .echart-component {
    margin-top: 0px;
  }
  
  
  .bottom-chooice {
    border-style: solid; /* 边框样式为实线 */
    border-width: 1px; /* 边框宽度为 1 像素 */
    border-color: rgba(255, 255, 255, 0.4); 
    height: 15%;
    margin-top: 10px;
  }
  
  
  </style>
  